@charset "UTF-8";
@import "fun";
@import "media";
$ww: 100%;
$maxW: 720px;

header{
	$headerH: 70vh;
	width: 100%;
	height: $headerH;
	position: relative;

	.bg-img{
		width: 100%;
		height: 100%;
		background: {
			image: url(../images/bg.jpg);
			size: cover;
			position: center center;
		}
		&:after{
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
		}
	}

	.header-top{
		$logoBoxH: 15vh;
		@include abs('absolute',$top:0,$left:0);
		width: 100%;
		height: 100%;
		
		.logo-nav{
			width: 100vw;
			height: $logoBoxH;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 5vw;
			@extend %box-center;
			@extend %ani;
			@include abs('fixed',$top:0,$left:0);
			z-index: 21;

			#logo{
				$logoH: 12vh;

				width: $logoH;
				height: $logoH;
				border: 1px solid #eee;
				border-radius: 50%;
				@extend %hidden;
				@extend %ani;

				a{
					display: inline-block;
					width: $logoH;
					height: $logoH;
					@extend %ani;
					img{
						@extend %ani;
						display: inline-block;
						width: $logoH;
						height: $logoH;
					}
				}

				&:hover{
					a img{
						transform: scale(1.05);
					}
				}
			}

			.nav-botton{
				width: 35px;
				height: 30px;
				cursor: pointer;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				z-index: 9;
				@extend %ani;

				@mixin spanG(){
					display: block;
					width: 35px;
					height: 5px;
					background: #fff;
					@extend %ani;
				}
				span{
					@include spanG;
				}
			}

			.nav-botton-open{
				span{
					&:nth-child(1){
						transform-origin: right center;
						transform: rotate(-45deg);
					}
					&:nth-child(2){
						transform: translateX(20px);
						opacity: 0;
					}
					&:nth-child(3){
						transform-origin: right center;
						transform: rotate(45deg);
					}
				}
			}

			.nav-box{
				@include abs('fixed',$top: 0,$right: 0);
				@include hengz(20vw);
				@extend %ani;
				width: 20vw;
				height: 100vh;
				display: flex;
				align-items: center;
				background: rgba(0,0,0,.9);
				z-index: 7;
				@extend %center;

				nav{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-content: space-between;
					@extend %center;

					a{
						@extend %center;
						@extend %ani;
						font-size: 1.25em;
						display: block;
						width: 60%;
						height: 50px;
						line-height: 50px;
						margin: 10px 0;
						text-decoration: inherit;
						color: #fff;
						opacity: 0.6;
						
						&:hover{
							transform: translateX(-5px);
							opacity: 1;
						}
					}
				}

				@include zsy(ipad){
					width: 40vw;
					@include hengz(40vw);
				}
				@include zsy(phone){
					width: 70vw;
					@include hengz(70vw);
				}
			}
			.nav-box-open{
				@include hengz(0vw);
			}
		}
		
		.scoll-logo-nav{
			height: 12vh;
			background: rgba(0,0,0,0.5);

			#logo{
				$logoH: 8vh;

				width: $logoH;
				height: $logoH;

				a{
					width: $logoH;
					height: $logoH;
					img{
						width: $logoH;
						height: $logoH;
					}
				}
			}
			.nav-botton span{
				background: #cff;
			}
		}
		.title{
			width: 90%;
			@extend %box-center;
			height: 100%;
			display: flex;
			align-items: center;

			h1,p{
				margin: 0;
				color: #ccc;
			}

			.title-box{
				@extend %box-center;
			}
		}
	}
}

section{
	max-width: $maxW;
	@extend %box-center;
	padding: 1.8em 0;
	@include zsy(s-phone){
		max-width: 100%;
	}

	.content{
		width: 100%;
		padding: 1.8em 0;
		position: relative;
		@extend %center;
		img{
			width: 90%;
		}
		p{
			width: 100%;
			text-align: left;
			line-height: 1.65em;
			text-indent:2em
		}
		a{
			text-decoration: inherit;
			color: #161823;
			@extend %ani;

			&:hover{
				color: #50616d;
			}
		}
		h2{
			width: 100%;
			text-align: left;
		}
		@include zsy(s-phone){
			padding: 0 5%;
		}

		.content-time{
			font-size: 0.8em;
			color: #808080;
			padding: 1em 0;
			width: 100%;
			text-align: left;
		}

		.content-hr{
			width: 70%;
			height: 1px;
			background: #808080;
			opacity: 0.5;
			@include abs('absolute',$bottom:0,$left:15%);
			@extend %center;

			&:after{
				content: 'L';
				display: inline-block;
				font-size: 0.9em;
				font-family: Script MT,Savoye LET;
				width: 50px;
				line-height: 16px;
				height: 16px;
				background: #fff;
				@include zhongz(-8px);
			}
		}
	}

	@include zsy(phone){
		padding: 0 3vw;
	}
}

footer{
	max-width: 1440px;
	height: 5em;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 20px;
	@extend %box-center;
	@include zsy(s-phone){
		width: 100%;
		padding: 0 1em;
	}
	div{
		&:nth-child(1),
		&:nth-child(3){
			width: 30%;
			height: 2em;
			line-height: 2em;

			p,a{
				font-size: 0.9em;
				color: #7f8c8d;
				text-decoration: inherit;
				margin: 0;
				padding: 0;
				line-height: 2em;
			}
		}
		&:nth-child(3){
			text-align: right;
		}
	}
	
	.footer-icon{
		width: 3em;
		height: 3em;
		border: 1px solid rgba(102,102,102,.3);
		border-radius: 50%;
		cursor: pointer;
		@extend %ani;
		@include zhongz(-5px);
		transform-origin: center bottom;

		&:hover{
			transform: scale(1.05);
		}
	}
	@include zsy(phone){
		padding: 0 10px;
	}
}